import React, { Component } from 'react';
import "./Tabbar.scss"
class App extends Component {
  state = {
    activeTab: "home"
    /* 
    community
    cart
    my
    */
  }
  handleClick = (activeTab) => {
    this.props.history.push(activeTab)
    this.setState({
      activeTab
    })
  }
  //过滤不合法路径
  filterPath = (activeTab) => {
    let filterActiveTab = "home";
    let activetabs = {
      home: true,
      community: true,
      cart: true,
      my: true
    }
    if (activetabs[activeTab]) {
      return activeTab
    } else {
      return "home";
    }
  }
  componentDidMount() {
    let activeTab = this.props.match.path.split("/")[1];
    let that=this;
    //过滤不合法路径
    activeTab = this.filterPath(activeTab);
    this.setState((prevState) => {
      return {
        activeTab
      }
    });
    window.addEventListener("hashchange", function () {
      let activeTab = that.props.match.path.split("/")[1];
      //过滤不合法路径
      activeTab = that.filterPath(activeTab);
      that.setState((prevState) => {
        return {
          activeTab
        }
      });
    })
  }
  render() {
    return (
      <div className="appTabbarContainer">
        <div className="appTabbarContent">
          {this.props.children}
        </div>
        <div className="appTabbar">
          <div className="appTabbarItem" onClick={this.handleClick.bind(this, "home")}>
            <i className={this.state.activeTab === 'home' ? "iconfont icon-icon40 active" : "iconfont icon-icon40"}></i>
            <span className={this.state.activeTab === 'home' ? 'title active' : "title"}>首页</span>
          </div>
          <div className="appTabbarItem" onClick={this.handleClick.bind(this, "category")}>
            <i className={this.state.activeTab === 'category' ? "iconfont icon-category active" : "iconfont icon-category"}></i>
            <span className={this.state.activeTab === 'category' ? 'title active' : "title"}>分类</span>
          </div>
          <div className="appTabbarItem" onClick={this.handleClick.bind(this, "cart")}>
            <i className={this.state.activeTab === 'cart' ? "iconfont icon-gouwuche active" : "iconfont icon-gouwuche"}></i>
            <span className={this.state.activeTab === 'cart' ? 'title active' : "title"}>购物车</span>
          </div>
          <div className="appTabbarItem" onClick={this.handleClick.bind(this, "my")}>
            <i className={this.state.activeTab === 'my' ? "iconfont icon-wodedangxuan active" : "iconfont icon-wodedangxuan"}></i>
            <span className={this.state.activeTab === 'my' ? 'title active' : "title"}>我的</span>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
